<template>
	<el-card>
		<div class="processedDivClass" style="height: calc(100vh - 260px)">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
				<el-form-item>
					<el-input v-model="state.queryForm.pttNm" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="state.queryForm.slfTelNo" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item>
					<fast-select
						style="width: 130px"
						v-model="state.queryForm.gdrCd"
						dict-type="mpi_gdr_cd"
						placeholder="请选择性别"
						clearable
						filterable
					></fast-select>
				</el-form-item>
				<el-form-item style="margin-right: 0">
					<el-select v-model="state.queryForm.dateType" style="width: 100px">
						<el-option label="创建时间" value="createTime">创建时间</el-option>
						<el-option label="操作时间" value="updateTime">操作时间</el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item>
					<el-date-picker v-model="dateTime" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
						style="width: 300px" format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss" @change="dateTimeChange" />
				</el-form-item> -->
				<el-form-item>
					<el-date-picker
						v-model="state.queryForm.startDate"
						type="datetime"
						placeholder="开始时间"
						format="YYYY-MM-DD HH:mm"
						time-format="HH:mm"
						@change="dataSTChange"
					/>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="state.queryForm.endDate"
						type="datetime"
						placeholder="结束时间"
						format="YYYY-MM-DD HH:mm"
						time-format="HH:mm"
						@change="dataETChange"
					/>
				</el-form-item>

				<el-form-item>
					<el-button :icon="Search" @click="searchBtn" type="primary">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Refresh" @click="resets">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table
				v-loading="state.dataListLoading"
				:data="state.dataList"
				border
				max-height="calc(100vh - 410px )"
				style="width: 100%"
				@selection-change="selectionChangeHandle"
			>
				<el-table-column prop="prmKey" label="主键ID" width="150" align="center">
					<template #default="scope">
						<span @click="addOrUpdateHandle(scope.row)" style="color: #5774f4; cursor: pointer">
							{{ scope.row.prmKey }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="pttNm" label="姓名" header-align="center" align="center"></el-table-column>
				<fast-table-column prop="gdrCd" label="性别" dict-type="mpi_gdr_cd" header-align="center" align="center"></fast-table-column>
				<el-table-column prop="bthDt" label="出生日期" header-align="center" align="center"></el-table-column>
				<el-table-column prop="slfTelNo" label="手机号" header-align="center" align="center"></el-table-column>
				<el-table-column prop="address" label="现住址" header-align="center" align="center"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
				<el-table-column prop="updater" label="处理人" header-align="center" align="center"></el-table-column>
				<el-table-column prop="mergeStatus" label="处理方式" header-align="center" align="center">
					<template #default="scope">
						{{ scope.row.mergeStatus == 1 ? '合并' : '忽略' }}
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="操作时间" header-align="center" align="center"></el-table-column>
				<!-- <el-table-column prop="score" label="分值" header-align="center" align="center"></el-table-column> -->
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
					<template #default="scope">
						<el-button type="primary" link @click="addOrUpdateHandle(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
			<!-- 弹窗, 新增 -->
			<div class="processedClass" style="height: 100%" v-if="processedDetailVisible">
				<ProcessedDetail ref="processedDetailRef" v-if="processedDetailVisible" @close="getDataList"> </ProcessedDetail>
			</div>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks/indexZSYPost.ts'
import { nextTick, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'

import { ElMessage, ElMessageBox } from 'element-plus/es'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import timeFormater from 'time-formater'

import ProcessedDetail from './processed-detail.vue'

const dateTime = ref([])

const processedDetailVisible = ref(false)

const state: IHooksOptions = reactive({
	dataListUrl: '/empi/empiabnormalrecord/page',
	queryForm: {
		pttNm: '',
		slfTelNo: '',
		idCrdNo: '',
		gdrCd: '',
		startDate: '',
		endDate: '',
		margeStatus: 1,
		dateType: 'createTime'
	}
})

const dateTimeChange = e => {
	dateTime.value = e
	if (e) {
		state.queryForm.startDate = timeFormater(e[0]).format('YYYY-MM-DD HH:mm')
		state.queryForm.endDate = timeFormater(e[1]).format('YYYY-MM-DD HH:mm')
	} else {
		state.queryForm.startDate = ''
		state.queryForm.endDate = ''
	}
}

const searchBtn = () => {
	state.page = 1
	getDataList()
}

const resets = () => {
	state.queryForm = {
		pttNm: '',
		slfTelNo: '',
		idCrdNo: '',
		gdrCd: '',
		startDate: '',
		endDate: '',
		margeStatus: 1,
		dateType: 'createTime'
	}

	state.page = 1
	state.limit = 10
	dateTime.value = []

	processedDetailVisible.value = false

	getDataList()
}

const processedDetailRef = ref()
const addOrUpdateHandle = data => {
	processedDetailVisible.value = true
	nextTick(() => {
		processedDetailRef.value.init(data)
	})
}

const dataSTChange = e => {
	if (e) {
		if (state.queryForm.endDate && new Date(e).getTime() > new Date(state.queryForm.endDate).getTime()) {
			ElMessage.warning('开始时间不能大于结束时间，请重新选择时间')
			state.queryForm.startDate = ''
			return
		}
		state.queryForm.startDate = timeFormater(e).format('YYYY-MM-DD HH:mm:ss')
	} else {
		state.queryForm.startDate = ''
	}
}
const dataETChange = e => {
	if (e) {
		if (state.queryForm.startDate && new Date(e).getTime() < new Date(state.queryForm.startDate).getTime()) {
			ElMessage.warning('结束时间不能小于开始时间，请重新选择时间')
			state.queryForm.endDate = ''
			return
		}
		state.queryForm.endDate = timeFormater(e).format('YYYY-MM-DD HH:mm:ss')
	} else {
		state.queryForm.endDate = ''
	}
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)

defineExpose({
	resets
})
</script>

<style lang="scss">
.processedDivClass {
	height: calc(100vh - 170px);
	position: relative;
	overflow: hidden;
}

.processedDivClass .processedClass .el-overlay {
	height: 100%;
	position: absolute !important;
	overflow: hidden;
}
</style>
